﻿@model Squidex.Areas.IdentityServer.Controllers.Profile.ProfileVM

@{
    ViewBag.Title = T.Get("users.profile.title");
}

<h1>@T.Get("users.profile.headline")</h1>

<h2>@T.Get("users.profile.pii")</h2>

@if (!string.IsNullOrWhiteSpace(Model.SuccessMessage))
{
    <div class="form-alert form-alert-success" id="success">
        @Model.SuccessMessage
    </div>
}

@if (!string.IsNullOrWhiteSpace(Model.ErrorMessage))
{
    <div class="form-alert form-alert-error">
        @Model.ErrorMessage
    </div>
}

<div class="row profile-section-sm">
    <div class="col profile-picture-col">
        <img class="profile-picture" src="api/users/{Model.Id}/picture/?q={@Guid.NewGuid()}" />
    </div>
    <div class="col">
        <form id="pictureForm" class="profile-picture-form" asp-controller="Profile" asp-action="UploadPicture" method="post" enctype="multipart/form-data">
            @Html.AntiForgeryToken()

            <span class="btn btn-secondary" id="pictureButton">
                <span>@T.Get("users.profile.uploadPicture")</span>

                <input class="profile-picture-input" name="file" type="file" id="pictureInput" />
            </span>
        </form>
    </div>
</div>

<form class="profile-form profile-section" asp-controller="Profile" asp-action="UpdateProfile" method="post">
    @Html.AntiForgeryToken()

    <div class="form-group">
        <label asp-for="Email">@T.Get("common.email")</label>

        <div error-for="Email"></div>
        <input asp-for="Email" type="email" class="form-control" />
    </div>

    <div class="form-group">
        <label asp-for="DisplayName">@T.Get("common.displayName")</label>

        <div error-for="DisplayName"></div>
        <input asp-for="DisplayName" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" asp-for="IsHidden" />

            <label class="form-check-label" asp-for="IsHidden">@T.Get("users.profile.hideProfile")</label>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">@T.Get("common.save")</button>
</form>

@if (Model.ShowAbout)
{
    <hr />

    <div class="profile-section">
        <h2 id="about">@T.Get("users.profile.aboutTitle")</h2>

        <small class="form-text text-muted mt-0 mb-3 d-block">@T.Get("users.profile.aboutHint")</small>

        <form class="profile-form" asp-controller="Profile" asp-action="UpdateAbout" method="post">
            @Html.AntiForgeryToken()

            <div class="form-group">
                <label asp-for="CompanyRole">@T.Get("users.profile.companyRole")</label>

                <select class="form-select" asp-for="CompanyRole">
                    <option></option>
                    <option value="RoleEmployee">@T.Get("users.profile.roleEmployee")</option>
                    <option value="RoleBusinessOwner">@T.Get("users.profile.roleBusinessOwner")</option>
                    <option value="RoleProductManager">@T.Get("users.profile.roleProductManager")</option>
                    <option value="RoleContentCreator">@T.Get("users.profile.roleContentCreator")</option>
                    <option value="RoleSoftwareDeveloper">@T.Get("users.profile.roleSoftwareDeveloper")</option>
                    <option value="RoleBusinessAnalyst">@T.Get("users.profile.roleBusinessAnalyst")</option>
                </select>
            </div>

            <div class="form-group">
                <label asp-for="CompanySize">@T.Get("users.profile.companySize")</label>

                <select class="form-select" asp-for="CompanySize">
                    <option></option>
                    <option value="SizeSingle">@T.Get("users.profile.sizeSingle")</option>
                    <option value="SizeSmall">@T.Get("users.profile.sizeSmall")</option>
                    <option value="SizeMedium">@T.Get("users.profile.sizeMedium")</option>
                    <option value="SizeLarge">@T.Get("users.profile.sizeLarge")</option>
                    <option value="SizeVeryLarge">@T.Get("users.profile.sizeVeryLarge")</option>
                </select>
            </div>

            <div class="form-group">
                <label asp-for="Project">@T.Get("users.profile.project")</label>

                <select class="form-select" asp-for="Project">
                    <option></option>
                    <option value="ProjectNewsMagazine">@T.Get("users.profile.projectNewsMagazine")</option>
                    <option value="ProjectPersonalBlog">@T.Get("users.profile.projectPersonalBlog")</option>
                    <option value="ProjectSmallBusiness">@T.Get("users.profile.projectSmallBusiness")</option>
                    <option value="ProjectCommerce">@T.Get("users.profile.projectCommerce")</option>
                    <option value="ProjectMobileApp">@T.Get("users.profile.projectMobileApp")</option>
                    <option value="ProjectBackend">@T.Get("users.profile.projectBackend")</option>
                    <option value="ProjectLearning">@T.Get("users.profile.projectLearning")</option>
                </select>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">@T.Get("common.save")</button>
            </div>
        </form>
    </div>
}

@if (Model.ExternalProviders.Any())
{
    <hr />

    <div class="profile-section">
        <h2>@T.Get("users.profile.loginsTitle")</h2>

        <table class="table table-fixed table-lesspadding">
            <colgroup>
                <col style="width: 100px;" />
                <col style="width: 100%;" />
                <col style="width: 100px;" />
            </colgroup>
            @foreach (var login in Model.ExternalLogins)
            {
                <tr>
                    <td>
                        <span>@login.LoginProvider</span>
                    </td>
                    <td>
                        <span class="truncate">@login.ProviderDisplayName</span>
                    </td>
                    <td class="text-right">
                        @if (Model.ExternalLogins.Count > 1 || Model.HasPassword)
                        {
                            <form asp-controller="Profile" asp-action="RemoveLogin" method="post">
                                @Html.AntiForgeryToken()

                                <input type="hidden" value="@login.LoginProvider" name="LoginProvider" />
                                <input type="hidden" value="@login.ProviderKey" name="ProviderKey" />

                                <button type="submit" class="btn btn-text-danger btn-sm">
                                    @T.Get("common.remove")
                                </button>
                            </form>
                        }
                    </td>
                </tr>
            }
        </table>

        <form asp-controller="Profile" asp-action="AddLogin" method="post">
            @Html.AntiForgeryToken()

            @foreach (var provider in Model.ExternalProviders.Where(x => Model.ExternalLogins.All(y => x.AuthenticationScheme != y.LoginProvider)))
            {
                var schema = provider.AuthenticationScheme.ToLowerInvariant();

                <button class="btn external-button-small btn-@schema" type="submit" name="provider" value="@provider.AuthenticationScheme">
                    <i class="icon-@schema external-icon"></i>
                </button>
            }
        </form>
    </div>
}

@if (Model.HasPasswordAuth)
{
    <hr />

    <div class="profile-section">
        <h2>@T.Get("users.profile.passwordTitle")</h2>

        @if (Model.HasPassword)
        {
            <form class="profile-form" asp-controller="Profile" asp-action="ChangePassword" method="post">
                @Html.AntiForgeryToken()

                <div class="form-group">
                    <label asp-for="OldPassword">@T.Get("common.oldPassword")</label>

                    <div error-for="OldPassword"></div>
                    <input asp-for="OldPassword" type="password" class="form-control" />
                </div>

                <div class="form-group">
                    <label asp-for="Password">@T.Get("common.password")</label>

                    <div error-for="Password"></div>
                    <input asp-for="Password" type="password" class="form-control" />
                </div>

                <div class="form-group">
                    <label asp-for="PasswordConfirm">@T.Get("users.profile.confirmPassword")</label>

                    <div error-for="PasswordConfirm"></div>
                    <input asp-for="PasswordConfirm" type="password" class="form-control" />
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">@T.Get("users.profile.changePassword")</button>
                </div>
            </form>
        }
        else
        {
            <form class="profile-form" asp-controller="Profile" asp-action="SetPassword" method="post">
                @Html.AntiForgeryToken()

                <div class="form-group">
                    <label asp-for="Password">@T.Get("common.password")</label>

                    <div error-for="Password"></div>
                    <input asp-for="Password" type="password" class="form-control" />
                </div>

                <div class="form-group">
                    <label asp-for="PasswordConfirm">@T.Get("users.profile.confirmPassword")</label>

                    <div error-for="PasswordConfirm"></div>
                    <input asp-for="PasswordConfirm" type="password" class="form-control" />
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">@T.Get("users.profile.setPassword")</button>
                </div>
            </form>
        }
    </div>
}

<hr />

<div class="profile-section">
    <h2>@T.Get("users.profile.clientTitle")</h2>

    <small class="form-text text-muted mt-0 mb-3 d-block">@T.Get("users.profile.clientHint")</small>

    <div class="row g-2 form-group">
        <div class="col-8">
            <label for="clientId">@T.Get("common.clientId")</label>

            <input class="form-control" name="clientId" id="clientId" readonly value="@Model.Id" />
        </div>
    </div>
    <div class="row g-2 form-group">
        <div class="col-8">
            <label for="clientSecret">@T.Get("common.clientSecret")</label>

            <input class="form-control" name="clientSecret" id="clientSecret" readonly value="@Model.ClientSecret" />
        </div>
        <div class="col-4 pl-2">
            <label for="generate">&nbsp;</label>

            <form class="profile-form" asp-controller="Profile" asp-action="GenerateClientSecret" method="post">
                @Html.AntiForgeryToken()

                <button type="submit" class="btn btn-success btn-block" id="generate">@T.Get("users.profile.generateClient")</button>
            </form>
        </div>
    </div>
</div>

<hr />

<div class="profile-section">
    <h2>@T.Get("users.profile.propertiesTitle")</h2>

    <small class="form-text text-muted mt-0 mb-3 d-block">@T.Get("users.profile.propertiesHint")</small>

    <form class="profile-form" asp-controller="Profile" asp-action="UpdateProperties" method="post">
        @Html.AntiForgeryToken()

        <div class="mb-2" id="properties">
            @for (var i = 0; i < Model.Properties.Count; i++)
            {
                <div class="row g-2 form-group">
                    <div class="col-5 pr-2">
                        <div error-for="Properties[i].Name"></div>
                        <input asp-for="Properties[i].Name" type="text" class="form-control" />
                    </div>
                    <div class="col pr-2">
                        <div error-for="Properties[i].Value"></div>
                        <input asp-for="Properties[i].Value" type="text" class="form-control" />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-text-danger remove-item">
                            <i class="icon-bin2"></i>
                        </button>
                    </div>
                </div>
            }
        </div>

        <div class="form-group">
            <button type="button" class="btn btn-outline-success" id="propertyAdd">
                <i class="icon-plus"></i> @T.Get("users.profile.propertyAdd")
            </button>
        </div>

        <button type="submit" class="btn btn-primary">@T.Get("common.save")</button>
    </form>
</div>

<script>
    var propertyPlusButton = document.getElementById('propertyAdd');
    var propertiesDiv = document.getElementById('properties');
    var pictureButton = document.getElementById('pictureButton');
    var pictureInput = document.getElementById('pictureInput');
    var pictureForm = document.getElementById('pictureForm');

    function updateNames() {
        for (var i = 0; i < propertiesDiv.children.length; i++) {
            var child = propertiesDiv.children[i];

            const inputs = child.getElementsByTagName('input');
            inputs[0].name = `Properties[${i}].Name`;
            inputs[1].name = `Properties[${i}].Value`;
        }
    }

    document.addEventListener('click',
        function (event) {
            if (event.target.className.indexOf('remove-item') >= 0) {
                event.target.parentNode.parentNode.remove();

                updateNames();
            }
        });

    pictureButton.addEventListener('click',
        function () {
            pictureInput.click();
        });

    pictureInput.addEventListener('change',
        function () {
            pictureForm.submit();
        });

    propertyPlusButton.addEventListener('click',
        function () {
            var template = document.createElement('template');

            template.innerHTML =
                `<div class="row g-2 form-group">
                    <div class="col-5 pr-2">
                        <input class="form-control" />
                    </div>
                    <div class="col pr-2">
                        <input class="form-control" />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-danger">
                            <i class="icon-bin"></i>
                        </button>
                    </div>
                </div>`;

            propertiesDiv.append(template.content.firstChild);

            updateNames();
        });

    var successMessage = document.getElementById('success');

    if (successMessage) {
        setTimeout(function () {
            successMessage.remove();
        }, 5000);
    }
</script>
